1
00:00:00,700 --> 00:00:07,210
All right so we're getting to the heart of our website in terms of the game logic.

2
00:00:07,210 --> 00:00:13,900
Now for this part of the module we're gonna have to write the logic that does three things.

3
00:00:14,080 --> 00:00:21,790
We have to one serve up the new questions to check the submitted answers against the correct answer

4
00:00:22,390 --> 00:00:26,770
and 3 reset the game once the game finishes.

5
00:00:26,770 --> 00:00:27,640
We're in the project.

6
00:00:27,640 --> 00:00:30,340
Do you think our gaming logic should live.

7
00:00:30,400 --> 00:00:35,590
What I would propose is putting all the gaming logic into a separate file.

8
00:00:35,590 --> 00:00:42,790
I would like to split out the part of the website that does the data processing from the part that does

9
00:00:42,790 --> 00:00:46,360
the styling from the part that does the drawing logic on the canvas.

10
00:00:46,510 --> 00:00:48,170
So let's right click in here.

11
00:00:48,180 --> 00:00:52,390
Couldn't you file and call this one maths Dot.

12
00:00:52,440 --> 00:00:59,280
J.S. we couldn't write all the logic for our game inside this file.

13
00:00:59,350 --> 00:01:03,370
That way we keep things nice and separate as a first step.

14
00:01:03,430 --> 00:01:08,150
Let's write the logic that serves up a new question for this point.

15
00:01:08,260 --> 00:01:11,980
What we want to do is we want to create a math question.

16
00:01:12,040 --> 00:01:19,210
We want to show the user to different digits that add up to a maximum value of nine and that job is

17
00:01:19,210 --> 00:01:21,820
gonna be handled by a function.

18
00:01:21,820 --> 00:01:30,400
So when I add a code snippet here using the function keyword and I'm gonna call my function next question

19
00:01:30,810 --> 00:01:32,970
and it's not going to take any parameters.

20
00:01:32,980 --> 00:01:38,980
So when I delete that bin and inside this function it's gonna go to logic that generates are random

21
00:01:38,980 --> 00:01:40,570
numbers for a Web site.

22
00:01:40,600 --> 00:01:47,220
So let's try this let's generate a random number between 0 and 4.

23
00:01:47,230 --> 00:01:48,660
How would you do this.

24
00:01:48,670 --> 00:01:56,440
Well lucky for us JavaScript has this capability through the math library the math library has a function

25
00:01:56,440 --> 00:02:01,410
here called random which is exactly what we're going to use.

26
00:02:01,420 --> 00:02:04,090
So how is this random function work.

27
00:02:04,090 --> 00:02:11,210
The random function will generate a floating point number in the range of 0 to 1.

28
00:02:11,260 --> 00:02:15,630
So it's inclusive of zero but not inclusive of one.

29
00:02:15,700 --> 00:02:17,830
So let's use this function in this code.

30
00:02:17,830 --> 00:02:21,610
I want to save the output of the function in a variable called and 1.

31
00:02:21,610 --> 00:02:28,960
And here what I want to do is I'm going to call math that random and I want to take this output that

32
00:02:28,960 --> 00:02:34,120
is between 0 and 1 and I want to multiply it by 5.

33
00:02:34,390 --> 00:02:40,050
So if the random output hit is zero then I'll get zero times five which is zero.

34
00:02:40,720 --> 00:02:49,450
If the random output is one half or zero point five then the result and one will be equal to 2.5.

35
00:02:49,450 --> 00:02:51,590
So that's fair enough right.

36
00:02:51,610 --> 00:02:59,430
Let's try and display this output on our Web site the place I want to display the output is for this

37
00:02:59,430 --> 00:03:02,710
first number right here which currently reads three.

38
00:03:02,850 --> 00:03:12,600
If I right click on it and click inspect then I can see that this number here has I d called and 1.

39
00:03:12,600 --> 00:03:18,290
And what this means is that I can get a hold of this element in my code through its ideas.

40
00:03:18,330 --> 00:03:18,620
Right.

41
00:03:19,410 --> 00:03:28,350
So I can come back in here and grab my document and get an element by I.D. and that element being the

42
00:03:28,350 --> 00:03:35,580
one that has the I.D. and one and then what I wanna do is gonna set the inner H temple so the contents

43
00:03:35,760 --> 00:03:38,580
of this element equal to.

44
00:03:38,580 --> 00:03:40,850
Well the value of the variable.

45
00:03:41,070 --> 00:03:43,530
So the value of the constant right here.

46
00:03:44,060 --> 00:03:44,740
Okay.

47
00:03:44,910 --> 00:03:49,840
So we've created our function but we've actually not used it anywhere.

48
00:03:49,860 --> 00:03:51,650
We have not called it anywhere yet.

49
00:03:52,440 --> 00:03:55,770
Let's call this function when our button gets pressed.

50
00:03:56,310 --> 00:04:05,190
So when that happens then the code inside here in our index HMO gets executed when our button gets pressed

51
00:04:05,700 --> 00:04:09,120
all the code between these two curly braces is triggered.

52
00:04:09,330 --> 00:04:12,000
So what do we want to happen.

53
00:04:12,090 --> 00:04:17,340
Let's leave predict image where it is for now let's leave clear canvas where it is for now but just

54
00:04:17,340 --> 00:04:17,780
below.

55
00:04:18,120 --> 00:04:20,820
Let's make a call to next question.

56
00:04:21,780 --> 00:04:24,250
But that's not all that we need to do right.

57
00:04:24,270 --> 00:04:26,180
There's something that we forgot.

58
00:04:26,280 --> 00:04:27,600
You know what it is.

59
00:04:27,630 --> 00:04:28,410
That's right.

60
00:04:28,410 --> 00:04:37,050
We have to link this index HDL to our maths thought J.S. file and the place we did that for the previous

61
00:04:37,050 --> 00:04:44,670
two files was right here using the script tag and then pointing it to that JavaScript file that we wanted

62
00:04:44,670 --> 00:04:47,760
to include so let's do the same thing.

63
00:04:47,850 --> 00:04:56,220
Let's add a script and for the source we're gonna set it equal to maths thought J.S. and that's it.

64
00:04:56,220 --> 00:05:03,060
So let's save our index age demo let's save our math stock yes and then let's come back in here and

65
00:05:03,210 --> 00:05:08,420
refresh the site then let's draw something on our canvas and hit check.

66
00:05:08,420 --> 00:05:17,250
Answer to trigger our next question method behold a random floating point number appears where we've

67
00:05:17,260 --> 00:05:19,530
previously had our number three.

68
00:05:19,540 --> 00:05:23,330
So at this point I have a challenge for you.

69
00:05:23,710 --> 00:05:31,750
What I'd like you to do is I'd like you to write the logic that will make this first number here not

70
00:05:31,750 --> 00:05:42,430
some floating point number here but an integer that's gonna be between 0 and 4 and then also I'd like

71
00:05:42,430 --> 00:05:50,320
you to add the logic that makes the second number here an integer between 0 and 5.

72
00:05:50,410 --> 00:05:54,760
I'll give you a few seconds to pause the video and give this a go

73
00:05:59,500 --> 00:06:03,220
ready here's the solution.

74
00:06:03,220 --> 00:06:07,790
The key to getting an integer is rounding down this number.

75
00:06:07,840 --> 00:06:15,580
So what I want to do is I want to wrap all of this inside math dot floor math thought floor will round

76
00:06:15,580 --> 00:06:23,590
down the result of this calculation here and because math thought random will never give me the value

77
00:06:23,590 --> 00:06:24,520
1.

78
00:06:24,880 --> 00:06:33,200
It means that this output here is always gonna be between 0 and 4 for the second number here.

79
00:06:33,250 --> 00:06:40,480
I can apply exactly the same logic so I can take these two lines copy them paste them below and just

80
00:06:40,480 --> 00:06:49,690
change this to N2 and I could change this to N2 because the I.D. of this element here this heading is

81
00:06:49,750 --> 00:06:57,490
N2 so I'm going to get the element by Eddie with the I.D. N2 and I'm going to set the value equal to

82
00:06:57,610 --> 00:07:01,680
not this constant here but this one right here.

83
00:07:01,870 --> 00:07:08,950
The only other thing I have to do to make sure that I indeed get a value between 0 and 5 4 and 2 is

84
00:07:08,950 --> 00:07:11,710
change this here to 6.

85
00:07:11,740 --> 00:07:18,860
So math thought random times 6 rounded down will always give me a value between 0 and 5.

86
00:07:19,150 --> 00:07:19,830
That's it.

87
00:07:19,870 --> 00:07:33,690
So let's save refresh and let's try and as you can see both numbers update as they should.

88
00:07:33,690 --> 00:07:41,670
So what we can do now is we can start tracking the correct answer coming back into this code.

89
00:07:41,670 --> 00:07:45,240
Let's create a variable here that reads answer.

90
00:07:45,510 --> 00:07:48,630
So var answer and inside.

91
00:07:48,630 --> 00:07:57,380
Next question what we can do is we can give answer a value we can set it equal to and one plus and 2.

92
00:07:57,510 --> 00:08:00,870
So that's gonna be the correct answer that we're going to check against.

93
00:08:00,930 --> 00:08:08,160
Now the checking logic is gonna live in a separate function and that function is going to have the name

94
00:08:08,640 --> 00:08:10,590
check answer.

95
00:08:10,590 --> 00:08:13,260
And there's also going to be no inputs no parameters.

96
00:08:13,830 --> 00:08:16,040
So what should we put in here.

97
00:08:16,050 --> 00:08:17,130
We've got our answer above.

98
00:08:17,280 --> 00:08:20,430
But the thing we don't have is a prediction.

99
00:08:20,430 --> 00:08:24,990
How do we get hold of the prediction based on what was drawn on the canvas.

100
00:08:24,990 --> 00:08:33,210
Well why don't we modify our predict image function so that it actually returns a prediction that we

101
00:08:33,210 --> 00:08:37,810
predict image will actually have an output namely the prediction that we're after.

102
00:08:38,220 --> 00:08:41,070
At the moment all we're doing is printing out a tensor called result.

103
00:08:41,100 --> 00:08:48,600
But what we would need is the actual value of this tensor here.

104
00:08:48,690 --> 00:08:52,830
How do we actually get a value out of a tensor.

105
00:08:52,830 --> 00:09:00,880
We need this integer right here the way we actually get a value out of a tensor in tensor flow light

106
00:09:01,390 --> 00:09:05,360
is using a method called Data Sync.

107
00:09:05,590 --> 00:09:14,440
And what you can see here from the description is it it downloads the values from a tensor and it provides

108
00:09:14,440 --> 00:09:17,380
as these values in the form of an array.

109
00:09:17,500 --> 00:09:20,190
Because there might be more than one right in a tensor.

110
00:09:20,500 --> 00:09:29,680
So back in V as code let's call this data sync method and let's store the output in a constant called

111
00:09:30,070 --> 00:09:40,270
output and output will get its value from result dot data sync with a capital S and then some parentheses

112
00:09:40,480 --> 00:09:41,740
at the end.

113
00:09:41,740 --> 00:09:48,490
Now as we read it in the documentation data sync will actually provide us with an array but if we look

114
00:09:48,490 --> 00:09:52,140
at our prediction here we've actually only got one value in our array.

115
00:09:52,180 --> 00:09:59,560
It's an array with a single entry and that means we can actually fetch that entry using the square bracket

116
00:09:59,560 --> 00:10:03,060
notation and grabbing the first element in our array.

117
00:10:03,070 --> 00:10:04,830
So square brackets 0.

118
00:10:05,470 --> 00:10:13,200
So this here now is just in number scrolling down to the very end of our method past the cleanup code.

119
00:10:13,360 --> 00:10:23,310
We can now return our output adding the return statement at the very end ensures that all the code above

120
00:10:23,490 --> 00:10:25,170
is actually executed.

121
00:10:25,170 --> 00:10:31,700
If we had the return statement somewhere up here then our cleanup will actually never get triggered.

122
00:10:31,950 --> 00:10:34,130
So that's something to be mindful of.

123
00:10:34,410 --> 00:10:41,020
Returning an output is usually the last thing that you want to do inside a function.

124
00:10:41,040 --> 00:10:41,360
All right.

125
00:10:41,490 --> 00:10:44,590
So now predict damage is returning a value.

126
00:10:44,880 --> 00:10:51,630
Let's change how predict the image is being used inside our index that each team L because instead of

127
00:10:51,630 --> 00:10:56,140
calling predict image every time that the button gets pressed.

128
00:10:56,160 --> 00:11:00,170
How about we actually just check the answer so we check.

129
00:11:00,180 --> 00:11:06,450
Answer instead of predict image after we check their answer we clear the canvas and we move on to the

130
00:11:06,450 --> 00:11:07,890
next question.

131
00:11:07,890 --> 00:11:09,520
That's logical right.

132
00:11:09,840 --> 00:11:16,840
Now that we're checking our answer every time the button gets pressed we can head inside our math start

133
00:11:16,840 --> 00:11:21,830
J us and we can complete the logic that's involved in checking the answer.

134
00:11:21,870 --> 00:11:24,370
We said we needed to get hold of the prediction right.

135
00:11:24,450 --> 00:11:31,620
So let's store the prediction inside a constant called prediction and we're gonna set that equal to

136
00:11:31,620 --> 00:11:34,390
the output from our predict image method.

137
00:11:34,620 --> 00:11:41,580
So predict image was now returning an output and we want to store that inside our prediction.

138
00:11:41,580 --> 00:11:47,870
Now that we've got both our answer and our prediction in hand let's log both of these to the console.

139
00:11:47,880 --> 00:11:50,480
Let's take a look at what it is that we've got.

140
00:11:50,760 --> 00:11:54,530
So I you use that string interpolation again with the back tick.

141
00:11:54,720 --> 00:12:00,380
And I went right and some dollar sign.

142
00:12:00,700 --> 00:12:12,260
Curly braces answer and then I'm going to put our prediction as well with that done save all your files

143
00:12:12,410 --> 00:12:16,210
so I've got unsafe changes in three files up here.

144
00:12:16,210 --> 00:12:20,670
So I want to save this one save this one and save this one.

145
00:12:20,720 --> 00:12:27,620
Now I'm going to head back into chrome refresh and I'm going to draw something in the canvas and hit

146
00:12:27,950 --> 00:12:29,180
check answer.

147
00:12:29,300 --> 00:12:31,490
Now what do you notice.

148
00:12:31,490 --> 00:12:36,300
Well the good news is is that I kept my prediction printed out right here.

149
00:12:36,560 --> 00:12:38,870
I see my log statement executed.

150
00:12:38,870 --> 00:12:44,870
And if you don't try clearing your browser data to make sure that you actually see this lock statement

151
00:12:45,140 --> 00:12:48,190
and make sure that prediction is actually defined.

152
00:12:48,530 --> 00:12:51,150
But what else do we notice here.

153
00:12:51,200 --> 00:12:55,190
We see that answer is in fact undefined.

154
00:12:55,190 --> 00:12:56,660
Why is that.

155
00:12:56,660 --> 00:13:00,080
Let's draw something in this box again and hit check answer again.

156
00:13:01,580 --> 00:13:08,560
So the second time we do this our answer has the value five and our prediction has the value one.

157
00:13:08,660 --> 00:13:10,490
So the first time it was undefined.

158
00:13:10,640 --> 00:13:14,810
But then when we check the answer again it had a value.

159
00:13:14,810 --> 00:13:15,950
Why is that.

160
00:13:15,950 --> 00:13:19,850
Well when does answer actually get its value.

161
00:13:20,390 --> 00:13:23,780
Well it gets its value right hip every time.

162
00:13:23,780 --> 00:13:28,310
Next question is being called and when is next question being called.

163
00:13:28,310 --> 00:13:30,020
Every time we press the button.

164
00:13:30,020 --> 00:13:36,370
So what we're seeing is answer has no value when the Web site actually is being loaded.

165
00:13:36,470 --> 00:13:38,790
Let's fix that by calling.

166
00:13:38,840 --> 00:13:40,110
Next question.

167
00:13:40,110 --> 00:13:46,010
When we actually load our Web site that way we actually get a new question every time the Web site is

168
00:13:46,010 --> 00:13:46,970
being reloaded.

169
00:13:46,970 --> 00:13:52,190
It doesn't always start out being three plus two three plus two or three plus two every single time

170
00:13:52,850 --> 00:13:57,140
to make sure that next question is being called when we load our Web site.

171
00:13:57,320 --> 00:14:05,630
Let's head into the index that HMO and then right here in our script after loading the model and preparing

172
00:14:05,630 --> 00:14:09,200
the canvas we can call next question.

173
00:14:09,200 --> 00:14:10,010
Simple as that.

174
00:14:10,340 --> 00:14:17,790
Now when we save and refresh we see that there's a new question every time that we load the web site

175
00:14:18,320 --> 00:14:22,790
and our answer actually has a value as well.

176
00:14:22,820 --> 00:14:24,410
So where are we now.

177
00:14:24,410 --> 00:14:25,730
Well we've got our answer.

178
00:14:25,730 --> 00:14:29,770
We've got our prediction and we can compare the two.

179
00:14:29,780 --> 00:14:33,320
So wouldn't it be nice to keep score.

180
00:14:33,650 --> 00:14:41,510
Let's increase the use of school every time they get an answer right and let's decrease the use of school

181
00:14:41,900 --> 00:14:43,970
every time they get an answer wrong.

182
00:14:44,000 --> 00:14:48,650
This logic fits perfectly inside our check answer function.

183
00:14:48,650 --> 00:14:57,140
If the prediction is equal to so when you use the double equal sign here just like in Python the answer

184
00:14:58,250 --> 00:15:00,750
then in that case the score should go up.

185
00:15:00,860 --> 00:15:03,350
So let's log something here.

186
00:15:03,350 --> 00:15:05,280
Correct.

187
00:15:05,330 --> 00:15:09,560
Otherwise we're gonna log wrong.

188
00:15:09,560 --> 00:15:10,490
Exclamation mark.

189
00:15:11,180 --> 00:15:12,500
Let's see if this works.

190
00:15:12,500 --> 00:15:20,130
Let's save refresh and well for formulas 2 that's equal to 6.

191
00:15:20,180 --> 00:15:20,540
Check.

192
00:15:20,540 --> 00:15:24,180
Answer and yes it is correct.

193
00:15:24,410 --> 00:15:32,780
And our logic is sound and that puts us in a great position to start keeping score.

194
00:15:32,840 --> 00:15:40,310
Now I want to create a variable up here that reads score and it's going to start out with a score of

195
00:15:40,520 --> 00:15:48,260
zero and then what I can do is I can come down here where we're checking our answer and I can increase

196
00:15:48,260 --> 00:15:49,760
the score by 1.

197
00:15:50,060 --> 00:15:55,640
Every time an answer is correct and the shorthand for this is plus plus.

198
00:15:55,640 --> 00:16:00,640
And then when I log this in my log statement using the back ticks.

199
00:16:00,670 --> 00:16:02,180
So here we'll see.

200
00:16:02,180 --> 00:16:03,470
Correct.

201
00:16:03,470 --> 00:16:09,010
And we'll just provide the score here for our convenience.

202
00:16:09,440 --> 00:16:15,320
And when the answer is incorrect we're gonna subtract one from the score and the shorthand here is unsurprisingly

203
00:16:15,860 --> 00:16:22,950
minus minus so let me update Locke's statement as well.

204
00:16:23,200 --> 00:16:24,840
And now let's give it a try.

205
00:16:25,150 --> 00:16:27,260
So I'll save my changes.

206
00:16:27,520 --> 00:16:32,580
Come back in here refresh and let's see this works.

207
00:16:32,590 --> 00:16:34,490
So six.

208
00:16:34,750 --> 00:16:35,370
Correct.

209
00:16:35,380 --> 00:16:41,690
The score is equal to one three plus four is equal to seven.

210
00:16:41,710 --> 00:16:44,010
So now our scores equal to two.

211
00:16:44,230 --> 00:16:51,350
And if I get one wrong then our score goes down to 1 but that's one problem with this logic.

212
00:16:51,360 --> 00:16:52,560
Right.

213
00:16:52,620 --> 00:16:57,900
What happens for example if we get a couple of questions wrong in a row.

214
00:16:58,050 --> 00:17:05,400
So if this answer is equal to one and this answer is equal to one then what we see is that our score

215
00:17:05,700 --> 00:17:07,110
goes negative.

216
00:17:07,110 --> 00:17:11,940
This is not what we want a negative score is not helpful.

217
00:17:11,940 --> 00:17:14,390
So how can we fix this.

218
00:17:14,400 --> 00:17:17,220
Let me pose that as a challenge to you.

219
00:17:17,220 --> 00:17:23,760
Let me give you a few seconds to pause the video and modify the code so that the score does not drop

220
00:17:23,880 --> 00:17:29,690
below zero.

221
00:17:29,810 --> 00:17:30,260
Ready.

222
00:17:30,260 --> 00:17:31,710
Here's the solution.

223
00:17:31,790 --> 00:17:38,010
All we would have to do is add another if statement before this line executes.

224
00:17:38,060 --> 00:17:44,300
So if the score is not equal to zero then we're going to subtract one.

225
00:17:44,300 --> 00:17:47,230
Otherwise we're going to leave the score as it is.

226
00:17:47,390 --> 00:17:54,040
The exclamation mark here is the logical not in JavaScript just like it is in Python.

227
00:17:54,050 --> 00:17:57,620
So now that we've done this modification let's test it out.

228
00:17:58,190 --> 00:18:05,780
So when I come here and I want to answer the first question incorrectly and my score stays at zero so

229
00:18:05,780 --> 00:18:10,000
I can answer a number of these questions incorrectly and it stays at zero.

230
00:18:10,490 --> 00:18:15,350
And when I start answering the questions correctly again my score starts to increase.

231
00:18:15,380 --> 00:18:16,370
Nice.

232
00:18:16,370 --> 00:18:17,120
That's what we want.

233
00:18:17,120 --> 00:18:20,170
So now we're able to keep score.

234
00:18:20,210 --> 00:18:27,260
Why not give the user a bit of visual feedback as they answer these questions correctly.

235
00:18:27,290 --> 00:18:29,130
Let's make our garden grow.

236
00:18:29,270 --> 00:18:31,790
Every time we get an answer right.

237
00:18:31,790 --> 00:18:36,680
And this is where the images that are part of the stop project come into play.

238
00:18:36,680 --> 00:18:41,590
We've got six vector images that will all act as foliage.

239
00:18:41,810 --> 00:18:43,400
In our garden.

240
00:18:43,400 --> 00:18:49,390
So now all we need to do is write the logic to make sure these images are being displayed on screen.

241
00:18:49,400 --> 00:18:50,810
That's the idea.

242
00:18:50,810 --> 00:18:58,400
And then every time a question is answered incorrectly we take one away that way our garden starts wilting

243
00:18:58,790 --> 00:19:01,760
as the questions are answered incorrectly.

244
00:19:01,760 --> 00:19:11,030
The way we're going to implement this in our code is using an array so that array will hold on to all

245
00:19:11,030 --> 00:19:14,790
the images that should be displayed on the screen.

246
00:19:14,870 --> 00:19:24,500
So when I create that array up here as a global variable and I want to call it background images and

247
00:19:24,500 --> 00:19:26,870
it's going to start its life as an empty array.

248
00:19:27,230 --> 00:19:35,420
So just to empty square brackets every time a question is answered correctly we are going to call the

249
00:19:35,450 --> 00:19:36,720
push method.

250
00:19:37,160 --> 00:19:41,950
And what this will do is it will add an item on the array.

251
00:19:41,990 --> 00:19:48,260
So if you head over to this page here on W3 schools you can try it yourself by adding the kiwi fruit

252
00:19:48,530 --> 00:19:50,470
to this array of fruits.

253
00:19:50,600 --> 00:19:57,260
Now in the example here in the documentation you can see that all these fruits actually just strings.

254
00:19:57,680 --> 00:20:04,480
But what are we working with exactly or what will we work with in our case what our array is actually

255
00:20:04,480 --> 00:20:07,990
gonna hold on to is not strings not numbers.

256
00:20:08,120 --> 00:20:10,790
It's going gonna hold on to a set of you or else.

257
00:20:11,120 --> 00:20:15,420
And those your L's are going to point to these vector images.

258
00:20:15,440 --> 00:20:21,560
Let me show you how this is going to work when our question is answered correctly.

259
00:20:21,750 --> 00:20:23,410
So our score has increased.

260
00:20:23,640 --> 00:20:30,110
What we can do is grab our background images and then push something onto this array.

261
00:20:31,380 --> 00:20:38,160
And the thing we're gonna push on is something called a U R L and that your l is gonna point to our

262
00:20:38,160 --> 00:20:44,690
first image say so our images are inside our image folder.

263
00:20:44,910 --> 00:20:55,520
So single quotes images then a slash a forward slash and then the first name of the image.

264
00:20:55,560 --> 00:20:57,710
And that's background.

265
00:20:57,720 --> 00:20:59,960
One dot SPG.

266
00:21:00,050 --> 00:21:06,210
The spelling here mind you has to match exactly what we've got here.

267
00:21:06,210 --> 00:21:14,070
Now that we've added this first image to our array what we need to do is actually display these on screen

268
00:21:15,510 --> 00:21:22,710
and the way this is gonna work is we're going to grab the body of our document and this will have a

269
00:21:22,710 --> 00:21:25,170
background image prompting.

270
00:21:25,620 --> 00:21:27,870
Here's how we're going to access it.

271
00:21:27,990 --> 00:21:34,380
We're gonna grab our document and we're gonna grab the body in the document and then we're gonna go

272
00:21:34,380 --> 00:21:43,830
to the style of this body and when to set the background image of the style and what are we gonna set

273
00:21:43,830 --> 00:21:50,390
it to set it equal to our array of background images and that's it.

274
00:21:50,400 --> 00:22:00,010
So let's save and check if this works but come back in here refresh and answer our first question correctly.

275
00:22:00,050 --> 00:22:08,030
So that's a seven foot check the answer then indeed we've set the background image of our body to the

276
00:22:08,060 --> 00:22:12,090
first image in our images folder.

277
00:22:12,140 --> 00:22:14,410
So that works right now.

278
00:22:14,450 --> 00:22:16,160
We don't just have one image right.

279
00:22:16,160 --> 00:22:18,440
We've got six different images.

280
00:22:18,500 --> 00:22:26,480
So what modification could we make to our code to make sure a new image gets added every single time.

281
00:22:26,480 --> 00:22:31,970
The one thing that you might notice is that all the image names actually end in a number which means

282
00:22:32,120 --> 00:22:38,140
that we could actually use our score to grab the next image.

283
00:22:39,000 --> 00:22:45,950
Let's do that instead of using the number one here let's use string interpolation to grab hold of the

284
00:22:45,950 --> 00:22:52,420
score instead I'm going to penned the score to this file name right here.

285
00:22:52,850 --> 00:22:53,610
Let's try this.

286
00:22:53,630 --> 00:23:00,290
Let's save our changes refresh our page and then start answering some of these questions.

287
00:23:00,590 --> 00:23:02,550
So that first one is zero.

288
00:23:02,690 --> 00:23:05,490
The second one is six.

289
00:23:05,510 --> 00:23:12,020
But as you can see nothing happened because our model predicted five because I was writing a very untidy

290
00:23:12,020 --> 00:23:12,310
way.

291
00:23:13,100 --> 00:23:13,850
So let's try again.

292
00:23:14,120 --> 00:23:26,130
So I want to go with one and then two and then six and then eight our garden really seems to be growing

293
00:23:26,130 --> 00:23:29,200
at this point which is really really nice.

294
00:23:29,400 --> 00:23:34,960
But as we get to the end of the number of images that we have.

295
00:23:35,100 --> 00:23:37,050
What do you think will happen.

296
00:23:37,340 --> 00:23:45,740
So far I answer this one right here then I've got my last image and this point I'm going to run out.

297
00:23:45,740 --> 00:23:49,220
So if you look at the error message here what do we see.

298
00:23:50,260 --> 00:23:54,680
We see that it's looking for background seven dot SPG.

299
00:23:54,790 --> 00:23:58,270
And it says four or four file not found.

300
00:23:58,270 --> 00:23:58,810
Why is that.

301
00:23:59,230 --> 00:24:03,130
Well because background seven doesn't exist.

302
00:24:03,340 --> 00:24:04,630
So that's a problem.

303
00:24:04,630 --> 00:24:05,420
Right.

304
00:24:05,440 --> 00:24:07,010
But how do we fix it.

305
00:24:07,030 --> 00:24:14,430
How about we only add a picture if the score is actually less than or equal to six.

306
00:24:14,680 --> 00:24:22,280
If the score is higher than six then let's congratulate the user and restart the quiz.

307
00:24:22,300 --> 00:24:25,910
I think this actually makes a really good challenge.

308
00:24:25,930 --> 00:24:31,840
I'd like you to have a go at writing the code that only adds new pictures.

309
00:24:31,900 --> 00:24:41,920
As long as we have images and if the score gets too high then use a window alert to write a congratulatory

310
00:24:41,920 --> 00:24:45,910
message and then restart the quiz.

311
00:24:45,910 --> 00:24:53,890
I'll give you a few seconds to pause the video before I show you the solution.

312
00:24:53,900 --> 00:24:54,170
All right.

313
00:24:54,170 --> 00:24:55,420
Did you have a go.

314
00:24:55,460 --> 00:24:58,990
Here's a sample solution for how to implement this.

315
00:24:59,300 --> 00:25:05,690
Only adding images if the score is less than or equal to six we can accomplish that with another if

316
00:25:05,690 --> 00:25:08,680
statement someone a nest an if statement and here.

317
00:25:08,740 --> 00:25:15,190
Just read the score smaller or equal to 6 which is the maximum number of images that we have.

318
00:25:15,350 --> 00:25:22,890
And then I want to move these two lines of code into the curly braces of this if statement.

319
00:25:23,240 --> 00:25:29,300
So this is the part of the code that will get executed as long as there are plants that can grow in

320
00:25:29,300 --> 00:25:30,790
our garden.

321
00:25:30,800 --> 00:25:33,140
Now what the garden is already fully grown.

322
00:25:33,440 --> 00:25:38,310
Well in that case we should execute the code in an else clause.

323
00:25:38,330 --> 00:25:40,140
We've reached the end of the quiz.

324
00:25:40,160 --> 00:25:47,150
So let's tell the user that they've won and we should reset to make sure that he can go and have another

325
00:25:47,150 --> 00:25:50,220
go in order to send the congratulations.

326
00:25:50,240 --> 00:25:57,530
Using the alert we're simply going to use a lot open parentheses and then write our message in here.

327
00:25:57,620 --> 00:25:58,580
I'm simply going to write.

328
00:25:58,580 --> 00:26:01,860
Well done your math garden is in full bloom.

329
00:26:01,880 --> 00:26:03,520
Want to start again.

330
00:26:03,530 --> 00:26:04,960
And I'm not going to give them a choice.

331
00:26:04,970 --> 00:26:07,090
They're just gonna have to start again.

332
00:26:07,220 --> 00:26:12,300
But here's the question how do we actually reset the quits in our case.

333
00:26:12,350 --> 00:26:18,440
What are the two things that actually change as the user progresses through the quits.

334
00:26:19,400 --> 00:26:25,890
Well that's gonna be the score and the number of images inside the background images array.

335
00:26:25,900 --> 00:26:27,260
Right.

336
00:26:27,320 --> 00:26:35,930
So a reset simply involves setting the score back to zero and setting background images equal to an

337
00:26:35,930 --> 00:26:37,820
empty array.

338
00:26:38,000 --> 00:26:45,080
Now that the two key variables are reset the only thing that we have to do is make sure we display the

339
00:26:45,080 --> 00:26:47,690
changes to the user.

340
00:26:47,810 --> 00:26:54,740
So that's going to be exactly the same line of code that we're using to grow and add new plants to our

341
00:26:54,740 --> 00:26:56,120
garden.

342
00:26:56,150 --> 00:27:03,980
So if I copy this line pasted in then what should happen is we are going to remove all the images from

343
00:27:03,980 --> 00:27:09,340
our array and we're going to update what's on screen with an empty array.

344
00:27:09,350 --> 00:27:17,020
So meaning we're going to be removing all the images and showing the blank Web site to the user.

345
00:27:17,150 --> 00:27:25,010
So let's try this by going through the quiz zero plus zero is equal to zero three plus zero is equal

346
00:27:25,010 --> 00:27:26,840
to three.

347
00:27:26,870 --> 00:27:28,390
We've had this one before.

348
00:27:28,790 --> 00:27:31,440
Now three plus one is equal to four.

349
00:27:31,510 --> 00:27:32,390
How many more to go.

350
00:27:32,390 --> 00:27:33,050
Not that many.

351
00:27:33,050 --> 00:27:33,290
Right.

352
00:27:33,440 --> 00:27:45,100
So five that's eight that's three and now we've reached the end of the quiz.

353
00:27:45,110 --> 00:27:46,360
Well done.

354
00:27:46,580 --> 00:27:47,770
Want to start again.

355
00:27:48,300 --> 00:27:52,820
OK and here we are back at the beginning of the quiz.

356
00:27:53,390 --> 00:27:56,200
So that works wonderfully right.

357
00:27:56,210 --> 00:28:02,200
The only thing left to implement is the garden wilting and dying.

358
00:28:02,210 --> 00:28:04,490
If an answer is incorrect.

359
00:28:04,490 --> 00:28:09,530
So in my opinion this makes a perfect challenge once again to solve this challenge.

360
00:28:09,620 --> 00:28:14,750
You'll have to figure out a couple of things you'll have to figure out how to remove an element from

361
00:28:14,750 --> 00:28:16,780
the background imagery.

362
00:28:16,820 --> 00:28:20,980
You also have to alert the user that they got an answer wrong.

363
00:28:21,050 --> 00:28:31,100
And as a little bit of an extra challenge I'd like you to remove the image from the screen after a little

364
00:28:31,100 --> 00:28:39,620
bit of a delay so you can use this function right here called set timeout in order for the image to

365
00:28:39,620 --> 00:28:45,340
be removed after a small delay of like a couple of seconds.

366
00:28:45,440 --> 00:28:53,310
I'll give you a bit of time to pause the video before I show you the solution.

367
00:28:53,370 --> 00:28:54,360
Ready.

368
00:28:54,360 --> 00:28:55,370
Here it goes.

369
00:28:55,380 --> 00:28:59,980
So the first thing I'll add is the alert and the alert is gonna read.

370
00:29:00,290 --> 00:29:01,190
Whoops.

371
00:29:01,230 --> 00:29:11,570
Check your calculations and try writing the number neater next time.

372
00:29:11,800 --> 00:29:19,530
Afterwards I'm going to call this such timeout function and the way I'm going to use it is simply by

373
00:29:20,100 --> 00:29:24,770
putting such timeout and then inside the callback.

374
00:29:25,200 --> 00:29:33,180
We're gonna provide no name no parameters but we're gonna write a little bit of code and the first thing

375
00:29:33,180 --> 00:29:39,900
we're gonna do is when to remove an item from our background images array push was the name of the method

376
00:29:39,960 --> 00:29:48,090
to add an item to the array and pop is the name of the method that removes an item.

377
00:29:48,510 --> 00:29:54,710
So background images pop pop and then we simply call this line of code once again.

378
00:29:54,900 --> 00:30:03,780
So we're gonna update the background image of our body with the newly shrunken background images array.

379
00:30:03,810 --> 00:30:09,110
There we go with regards to the delay in order to implement that.

380
00:30:09,540 --> 00:30:13,120
All we need to do is supply a second argument.

381
00:30:13,170 --> 00:30:18,280
You can even see here in the quick help that the second argument is the time out.

382
00:30:18,570 --> 00:30:23,220
How long should it take before the code in the callback is executed.

383
00:30:24,060 --> 00:30:28,530
And I think one or two seconds works really well.

384
00:30:28,530 --> 00:30:37,070
The way you would provide a one second timeout is writing 1000 1000 milliseconds is equal to 1 seconds.

385
00:30:37,380 --> 00:30:38,750
So that's it.

386
00:30:38,820 --> 00:30:41,760
That's the solution to the challenge.

387
00:30:41,760 --> 00:30:43,290
Let's try it out.

388
00:30:43,290 --> 00:30:51,580
Let me answer the first question correctly and then let me answer the second question incorrectly.

389
00:30:51,580 --> 00:30:58,300
I get my feedback message loops check your calculations and then the foliage is removed.

390
00:30:58,450 --> 00:31:03,950
After a good second or so and that's the gaming logic all done.

391
00:31:04,180 --> 00:31:08,110
Now we've written all the code for the entire project.

392
00:31:08,350 --> 00:31:10,360
So what's the next step.

393
00:31:10,360 --> 00:31:18,370
Well in the last lesson for this module we're going to say good bye to our local host and we're going

394
00:31:18,370 --> 00:31:22,580
to publish our Web site and make it live for the world to see.

395
00:31:22,690 --> 00:31:25,480
So for all of that I'll see you in the next lesson.